<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mapboxgl叠加arcgisserver4490</title>
    <link href="http://192.168.1.90:8088/lib/mapbox-gl-cgcs2000/mapbox-gl.css" rel="stylesheet">
    <script src="http://192.168.1.90:8088/lib/mapbox-gl-cgcs2000/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    mapboxgl.accessToken = "pk.eyJ1IjoiMTMwODMzMTg5MzYiLCJhIjoiY2xibGtyajFtMDhxejNubXJ1cXN1ZHluMCJ9.A2zTG8g83ILm8AZELWZ8Vw";

    let url = "https://jiangsu.tianditu.gov.cn/mapjs2/rest/services/MapJS/js_yxdt_latest/MapServer/tile/{z}/{y}/{x}";
    let bounds = [
        [-180, -90], // 西南坐标
        [180, 90], // 东北坐标
    ];

    let map = new mapboxgl.Map({
        container: "map",
        // 注意：crs属性在Mapbox GL JS中不是直接支持的配置项
        maxBounds: bounds,
        style: {
            version: 8,
            sources: {
                "yxdt": {
                    type: "raster",
                    tiles: [url],
                    tileSize: 256
                }
            },
            layers: [{
                id: "jssldt_1",
                type: "raster",
                source: "yxdt",
                minzoom: 0,
                maxzoom: 19
            }]
        },
        center: [119.86, 32.95],
        zoom: 7,
        pitch: 0,
        maxZoom: 19,
        minZoom: 0
    });

    map.on("load", function (event) {
        console.log(event);
        map.addSource("yxdt2", {
            type: "raster",
            tiles: [url],
            tileSize: 256
        });
        map.addLayer({
            id: "yxdt2",
            type: "raster",
            source: "yxdt2",
            paint: {
                "raster-opacity": 1
            }
        });

    });



</script>
</body>
</html>